<template>
	<view class="brand-info" :style="{paddingTop: tabsHeight + 'px'}">
		<block v-if="show">
			<view class="brand-info-tabs" v-if="isCarousel">
				<view :class="['brand-info-tabs-box',{fixed: isFixed}]">
					<u-tabs
						height="auto"
						:show-bar="false"
						:list="brandList"
						:current="brandIndex"
						@change="brandTabChange"
						active-color="#F59359"
						inactive-color="#666666"
						bg-color="#F7F7F7"
						:bold="false"
						name="factory_name"
						font-size="28">
					</u-tabs>
				</view>
			</view>
			<view class="brand-info-box">
				<view class="brand-bg">
					<image 
						:style="[{
							height: isCarousel?'214rpx':'546rpx',
							borderRadius: isCarousel?'16rpx 16rpx 0 0':'0'
						}]" 
						mode="aspectFill" 
						:src="factoryInfo.background_img">
					</image>
				</view>
				<view class="brand-info-box-text">
					<view class="box-text-inner">
						<view class="brand-info-box-text-left">
							<image :src="factoryInfo.category_img" mode="aspectFit"></image>
						</view>
						<view class="brand-info-box-text-right">
							<view class="brand-info-box-tit">{{factoryInfo.name}}<text>{{factoryInfo.style}}</text></view>
							<view class="brand-info-box-hot">
								<text>人气：{{factoryInfo.click}}</text>
								<text>最近上新 12 款</text>
							</view>
						</view>
					</view>
					<!-- <view class="brand-action">
						<view class="brand-action-item" style="margin-right: 20rpx;">
							<view class="brand-collect" @click="poster">
								<u-icon name="photo" size="35" style="margin-top: 10rpx;"></u-icon>
							</view>
							<view class="action-name">分享</view>
						</view>
						<view class="brand-action-item">
							<view class="brand-collect" @click="UpCollect">
								<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon1_hover.png" v-if="isCollect"></image>
								<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon1.png" v-else></image>
							</view>
							<view class="action-name">收藏</view>
						</view>
					</view> -->
				</view>
				<view class="brand-info-box-des">
					<view class="des-tit">品牌简介：</view>
					<u-read-more
						ref="uReadMore"
						:toggle="true"
						show-height="160"
						open-text="收起"
						close-text="展开"
						text-indent="0"
						color="#000"
						font-size="24"
						v-show="factoryInfo.company_desc"
						:shadowStyle="{marginTop: '-100px',paddingTop: '100px',backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)'}">
							<rich-text :nodes="factoryInfo.company_desc"></rich-text>
						</u-read-more>
				</view>
				<view class="brand-tags">
					<view class="brand-tags-item" @click="goFactoryImages(factoryInfo.user_F_id)">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-17/20220317/ea157908c4f1f601c9c53061c1eaf54d.png"></image>
						<text>面料</text>
					</view>
					<view class="brand-tags-item" @click="goFactoryShowroom(factoryInfo.user_F_id)">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-17/20220317/18ba818f825cbabac366d305988040c1.png"></image>
						<text>展厅</text>
					</view>
					<view class="brand-tags-item" @click="goFactoryVideo(factoryInfo.user_F_id)" v-if="!isReview">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-17/20220317/6c969c4f8f6b76c60e226f2bf438c7fe.png"></image>
						<text>视频</text>
					</view>
				</view>
				<view class="brand-info-box-tags">
					<view class="brand-info-box-tags-item" v-if="factoryInfo.delivery">
						<view class="value"><text>货期:</text> <text>{{factoryInfo.delivery}}</text></view>
					</view>
					<view class="brand-info-box-tags-item" v-if="factoryInfo.texture">
						<view class="value"><text>材质:</text> <text>{{factoryInfo.texture}}</text></view>
					</view>
					<view class="brand-info-box-tags-item" v-if="factoryInfo.size">
						<view class="value"><text>定制:</text> <text>{{factoryInfo.size}}</text></view>
					</view>
				</view>
				<!-- <image class="brand-img"
					:src="factoryInfo.factory_img"
					mode="aspectFill"
					v-if="factoryInfo.factory_img && factoryInfo.factory_img!=='null'">
				</image> -->
			</view>
			<view class="white-raidus"></view>
			<view class="brand-info-sort-tabs">
				<u-tabs
					:list="sortList"
					:current="sortIndex"
					@change="sortTabChange"
					active-color="#141414"
					inactive-color="#666666"
					name="class_name"
					font-size="28">
				</u-tabs>
			</view>
			<view class="brand-info-sort-small-func" style="padding: 0 30rpx; background-color: #FFF;">
				<pt-small-function
					:Multiple="true"
					@changeType="changeType"
					:spacePopList="space_list"
					:stylePopList="style_list"
					:sortPopList="sort_list"
					:typeIndexProps="0"
					@clickItem="clickItem">
				</pt-small-function>
			</view>
			<view class="brand-info-products" v-if="goods_list.length">
				<pt-product-items
					:showSort="false"
					:object="{goods_list: goods_list}"
					:isBig="isBig"
					:orderBy="order_by"
					@GoInfoAddFoot="GoInfoAddFoot"
					:isLogin="isLogin">
				</pt-product-items>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="noMore && goods_list.length"></pt-nomore>
			<view style="padding-bottom: 50rpx; background-color: #FFF;" v-if="!goods_list.length && !isLoading && noMore">
				<pt-nothing text="暂无商品" bgColor="#FFF" :isHigh="true"></pt-nothing>
			</view>
		</block>
		
		<view class="bot-btn">
			<view class="collection" @click="UpCollect">
				<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon1_hover.png" v-if="isCollect"></image>
				<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon1.png" v-else></image>
				<view class="label">收藏</view>
			</view>
			<view class="share" @click="poster">分享</view>
		</view>
		
		<!-- 海报 -->
		<uni-popup :type="popupType" ref="poster" @change="posterFun" class="posterPopup">
			<view class="poster" v-if="showCanvas">
				<!-- #ifdef H5 -->
				<!-- <canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 900rpx;"></canvas> -->
				<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 900rpx;"></canvas>
				<image :src="H5PosterUrl" style="width: 600rpx; height: 900rpx;" v-if="H5PosterUrl"></image>
				<view class="save">请长按图片保存</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 900rpx;"></canvas>
				<view class="save" @click="savePoster">保存到相册</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="appPoster">
					<view class="close" @click="closePoster"><u-icon name="close" size="40" color="#FFF"></u-icon></view>
					<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 900rpx;"></canvas>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="poster-share-btns">
					<view class="poster-share-btn" @click="sharePostToFriend(1)">
						<u-icon name="weixin-circle-fill" size="80" color="#31cc76"></u-icon>
						<view class="text">微信好友</view>
					</view>
					<view class="poster-share-btn" @click="sharePostToFriend(2)">
						<u-icon name="moments-circel-fill" size="80" color="#f59359"></u-icon>
						<view class="text">朋友圈</view>
					</view>
					<view class="poster-share-btn" @click="savePoster">
						<view class="poster-share-btn-image">
							<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/save.png" mode="aspectFit"></image>
						</view>
						<view class="text">保存图片</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</uni-popup>
		<!-- 海报 -->
		
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isReview: false,
				show: false,
				isBig: false,
				isCarousel: false,
				order_by: 'weight',
				style_id: '',
				pro_style_id: '',
				space_id: '',
				class_id: '',
				factory_id: '',
				asc: 2,
				brandIndex: 0,
				brandList: [],
				sortIndex: 0,
				sortList: [{
					name: '全部'
				}],
				goods_list: [],
				tabsHeight: '',
				isFixed: false,
				page: 0,
				noMore: false,
				isLoading: false,
				showMore: false,
				factoryInfo: {
					company_desc: ''
				},
				space_list: [],
				style_list: [],
				sort_list: [{
					sort_id: 1,
					sort_name: '综合',
					selected: false
				},{
					sort_id: 2,
					sort_name: '上新',
					selected: false
				},{
					sort_id: 3,
					sort_name: '人气',
					selected: false
				},{
					sort_id: 4,
					sort_name: '价格',
					selected: false
				},{
					sort_id: 7,
					sort_name: '销量',
					selected: false
				}],
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				isCollect: false,
				popupType: 'center',
				showCanvas: false,
				H5PosterUrl: '',
				sname: '',
				posterType: '',
				canvasW: '',
				canvasH: '',
				QRcode: '',
				isLogin: false
			};
		},
		onLoad(options) {
			// #ifdef H5 || MP-WEIXIN
			this.popupType = 'center'
			// #endif
			// #ifdef APP-PLUS
			this.popupType = 'bottom'
			// #endif
			this.isReview = uni.getStorageSync('review')
			if(options.type){
				this.posterType = options.type
			}
			if(options.type==2){
				this.isCarousel = true
				this.style_id = options.style_id
				this.factory_id = options.factory_id
				if(options.factory_style){
					this.style_id = options.factory_style
				}
				this.getBrandList()
				if(this.factory_id){
					this.getFactoryInfo()
				}
			}else if(options.type==1){
				this.factory_id = options.factory_id
				this.getFactoryInfo()
			}
			if(options.isShare){
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
			}
			let scene
			if(options.scene){
				scene = decodeURIComponent(options.scene)
				if(this.filterUrlParam(scene).type==2){
					this.sname = this.filterUrlParam(scene).sname
					this.isCarousel = true
					this.style_id = this.filterUrlParam(scene).sid
					this.factory_id = this.filterUrlParam(scene).fid
					this.getBrandList()
					uni.setStorageSync('newurl','/brand-list/brand-info/brand-info?type='+this.filterUrlParam(scene).type+'&style_id='+this.filterUrlParam(scene).sid+'&style_name='+this.filterUrlParam(scene).sname+'&factory_id='+this.filterUrlParam(scene).fid)
				}else{
					this.factory_id = this.filterUrlParam(scene).factory_id
					this.getFactoryInfo()
					uni.setStorageSync('newurl','/brand-list/brand-info/brand-info?type='+this.filterUrlParam(scene).type+'&factory_id='+this.filterUrlParam(scene).factory_id)
				}
			}
		},
		onShow() {
			if(uni.getStorageSync('userInfo')){
				this.isLogin = true
			}
		},
		onPageScroll(e) {
			if(e.scrollTop - 30 > this.tabsHeight){
				this.isFixed = true
			}else{
				this.isFixed = false
			}
		},
		methods: {
			// 解析小程序scene参数
			filterUrlParam(urlSearch){
			  let ret = {}
			  let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			  if (urlSearch) {
			    var strParam = urlSearch;
			    var result
			    while ((result = regParam.exec(strParam)) != null) {
			      ret[result[1]] = result[2]
			    }
			  }
			  return ret
			},
			clickItem(e){
				if(e.sort!=='sort'){
					this.order_by = e.sort
				}else{
					this.order_by = 'weight'
				}
				if(e.asc){
					this.asc = e.asc
				}else{
					this.asc = 2
				}
				this.space_id = e.space_id!=0?e.space_id:''
				this.pro_style_id = e.style_id!=0?e.style_id:''
				this.noMore = false
				this.page = 0
				this.goods_list = []
				this.init()
			},
			changeType(e){
				if(e==1){
					this.isBig = true
				}else{
					this.isBig = false
				}
			},
			getBrandList(){
				this.$u.api.StyleFactoryList({style_id: this.style_id}).then(res => {
					this.brandList = res.datas
					if(!this.factory_id){
						this.factory_id = res.datas[0].factory_id
					}
					this.brandList.forEach((item,index) => {
						if(this.factory_id==item.factory_id){
							this.brandIndex = index
						}
					})
				}).then(res => {
					this.$nextTick(() => {
						this.getFactoryInfo()
					})
				})
			},
			getFactoryInfo(){
				this.$u.api.FactoryInfo({factory_id: this.factory_id}).then(res => {
					this.show = true
					this.factoryInfo = res.datas
					this.sortList = res.datas.class_list
					this.space_list = res.datas.space_list
					this.style_list = res.datas.style_list
					if(this.factoryInfo.is_collect==1){
						this.isCollect = true
					}else{
						this.isCollect = false
					}
					uni.setNavigationBarTitle({
						title: this.factoryInfo.name
					})
					this.init()
				}).then(() => {
					setTimeout(() => {
						if(this.isCarousel){
							this.getTabsHeight()
						}
						this.$refs.uReadMore.init()
					},200)
					this.$u.api.GoodsClick({
						goods_id: this.factoryInfo.factory_sn,
						goods_type: 4
					})
				})
			},
			init(){
				console.log('goodsList')
				this.$u.api.FactoryGoodsList({
					factory_id: this.factory_id,
					page: this.page,
					class_id: this.class_id?this.class_id:'',
					order_by: this.order_by,
					asc: this.asc,
					space_id: this.space_id,
					style_id: this.pro_style_id,
					is_sale: 1,
					is_goods: 1
				}).then(res => {
					this.isLoading = false
					if(res.datas.list.length){
						res.datas.list.forEach(item => {
							this.goods_list.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			getTabsHeight(){
				uni.createSelectorQuery().in(this).select('.brand-info-tabs').boundingClientRect(res => {
					if(res){
						this.tabsHeight = res.height
					}
				}).exec()
			},
			brandTabChange(e){
				this.brandIndex = e
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.factory_id = this.brandList[e].factory_id
				this.getFactoryInfo()
				this.goods_list = []
				this.noMore = false
				this.page = 0
			},
			sortTabChange(e){
				this.sortIndex = e
				this.class_id = this.sortList[e].class_id
				this.goods_list = []
				this.noMore = false
				this.page = 0
				this.init()
			},
			goFactoryImages(factory_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/brand-list/brand-info/brand-images?factory_id='+factory_id
				})
				if (uni.getStorageSync('userInfo')) {
					this.addFoot('品牌详情-面料')
				}
			},
			goFactoryShowroom(factory_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/brand-list/brand-info/brand-showroom?factory_id='+factory_id
				})
				if (uni.getStorageSync('userInfo')) {
					this.addFoot('品牌详情-展厅')
				}
			},
			goFactoryVideo(factory_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/brand-list/brand-info/brand-videos?factory_id='+factory_id
				})
				if (uni.getStorageSync('userInfo')) {
					this.addFoot('品牌详情-视频')
				}
			},
			GoInfoAddFoot(){
				if (uni.getStorageSync('userInfo')) {
					this.addFoot('品牌详情-列表-商品详情')
				}
			},
			addFoot(where) {
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			UpCollect(){
				this.$u.api.UpCollect({status: 4,goods_id: this.factory_id}).then(res => {
					this.isCollect = !this.isCollect
					if(res.datas==='取消收藏成功'){
						uni.showToast({
							icon: 'none',
							title: '您已取消收藏'
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '收藏成功'
						})
						if(uni.getStorageSync('userInfo')){
							this.addFoot('品牌详情-收藏')
						}
					}
				})
			},
			writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop) {
			    function getTrueLength(str){//获取字符串的真实长度（字节长度）  
			        var len = str.length, truelen = 0;  
			        for(var x = 0; x < len; x++){  
			            if(str.charCodeAt(x) > 128){  
			                truelen += 2;  
			            }else{  
			                truelen += 1;  
			            }  
			        }  
			        return truelen;  
			    }  
			    function cutString(str, leng){//按字节长度截取字符串，返回substr截取位置  
			        var len = str.length, tlen = len, nlen = 0;  
			        for(var x = 0; x < len; x++){  
			            if(str.charCodeAt(x) > 128){  
			                if(nlen + 2 < leng){  
			                    nlen += 2;  
			                }else{  
			                    tlen = x;  
			                    break;  
			                }  
			            }else{  
			                if(nlen + 1 < leng){  
			                    nlen += 1;  
			                }else{  
			                    tlen = x;  
			                    break;  
			                }  
			            }  
			        }  
			        return tlen;  
			    }  
			    for(var i = 1; getTrueLength(text) > 0; i++){
			        var tl = cutString(text, bytelength);
							ctx_2d.setFillStyle('#8D8D8D');
							ctx_2d.font = 'normal normal 11px Microsoft YaHei';
							if(i < 4){
								ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
							}
							text = text.substr(tl);
			    }  
			},
			posterFun(e){
				this.showCanvas = e.show
			},
			// APP端关闭海报弹窗
			closePoster(){
				this.$refs.poster.close()
			},
			savePoster(){
				let _this = this
				uni.showLoading({
					title: '正在保存',
					mask: true
				})
				uni.canvasToTempFilePath({
				  canvasId: 'poster',
					success: (data) => {
						uni.hideLoading()
						// #ifdef APP-PLUS
						uni.saveImageToPhotosAlbum({
							filePath: data.tempFilePath,
							success(saveRes) {
								uni.showToast({
									icon: 'none',
									title: '保存成功，请在相册中查看',
									duration: 1500
								})
							},
							fail: () => {
								uni.showToast({
									icon: 'none',
									title: '保存失败，您已取消保存图片'
								})
							}
						})
						// #endif
						// #ifdef MP-WEIXIN
						uni.getSetting({
							withSubscriptions: true,
							success: (scope) => {
								if(!scope.authSetting['scope.writePhotosAlbum']){
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success: () => {
											uni.saveImageToPhotosAlbum({
												filePath: data.tempFilePath,
												success(saveRes) {
													uni.showToast({
														icon: 'none',
														title: '保存成功，请在相册中查看',
														duration: 1500
													})
												},
												fail: () => {
													uni.showToast({
														icon: 'none',
														title: '保存失败，您已取消保存图片'
													})
												}
											})
										},
										fail: () => {
											// uni.showToast({
											// 	icon: 'none',
											// 	title: '您已关闭相册访问开关，请开启后重新保存'
											// })
											this.$refs.openSetting.init()
										}
									})
								}else{
									uni.saveImageToPhotosAlbum({
										filePath: data.tempFilePath,
										success(saveRes) {
											uni.showToast({
												icon: 'none',
												title: '保存成功，请在相册中查看',
												duration: 1500
											})
										},
										fail: () => {
											uni.showToast({
												icon: 'none',
												title: '保存失败，您已取消保存图片'
											})
										}
									})
								}
							}
						})
						// #endif
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '海报生成失败，请重试'
						})
					}
				})
			},
			sharePostToFriend(type){
				uni.showLoading({
					mask: true,
					title: '正在生成分享··'
				})
				uni.canvasToTempFilePath({
				  destWidth: 600,
				  destHeight: 900,
				  canvasId: 'poster',
				  success: (data) => {
						switch (Number(type)){
							case 1:
								uni.share({
									provider: "weixin",
									scene: "WXSceneSession",
									type: 2,
									imageUrl: data.tempFilePath,
									success: () => {
										console.log('分享成功')
									}
								})
								break;
							case 2:
								uni.share({
									provider: "weixin",
									scene: "WXSenceTimeline",
									type: 2,
									imageUrl: data.tempFilePath,
									success: () => {
										console.log('分享成功')
									}
								})
								break;
						}
				  },
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			// canvas
			poster(){
				this.$nextTick(() => {
					if(uni.getStorageSync('userInfo')){
						this.$refs.poster.open()
						let scene
						if(this.posterType==2){
							scene = 'fid='+this.factory_id + '&type='+this.posterType + '&sname='+this.sname+'&sid='+this.style_id
						}else{
							scene = 'factory_id='+this.factory_id + '&type='+this.posterType
						}
						this.$u.api.app_create_activity_qr({
							url: 'brand-list/brand-info/brand-info',
							scene: scene
						}).then(res => {
							this.QRcode = res.datas
						}).then(() => {
							this.OnCanvas()
							// #ifdef H5
							uni.showLoading({
								title: '请稍后···'
							})
							setTimeout(() => {
								this.$nextTick(() => {
									uni.canvasToTempFilePath({
									  canvasId: 'poster',
										success: (data) => {
											this.$u.api.UploadImgByBase({file: data.tempFilePath}).then(res => {
												uni.hideLoading()
												this.H5PosterUrl = res.datas
											})
										},
										fail: (fail) => {
											console.log(fail)
											uni.showToast({
												icon: 'none',
												title: '海报生成失败，请重试'
											})
										}
									})
								})
							},1000)
							// #endif
						}).catch(() => {
							uni.showToast({
								icon: 'none',
								title: '生成失败，请重试!'
							})
							this.$refs.poster.close()
							this.addFoot('商品详情-海报分享')
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '请先登录'
						})
						setTimeout(() => {
							// #ifdef APP-PLUS
							uni.navigateTo({
								animationDuration: 500,
								url: '/pages/login/app-login'
							})
							// #endif
							// #ifdef MP-WEIXIN
							uni.navigateTo({
								animationDuration: 500,
								url: '/pages/login/login'
							})
							// #endif
						},1500)
					}
				})
			},
			async OnCanvas() {
				let _this = this;
				_this.ctx = uni.createCanvasContext('poster',this);
				
				_this.canvasW = uni.upx2px(600);
				_this.canvasH = uni.upx2px(900);
				
				_this.ctx.setFillStyle('#FFFFFF');
				_this.ctx.fillRect(0,0,_this.canvasW,_this.canvasH)
				
				const background_img = await _this.getImageInfo({ imgSrc: this.factoryInfo.background_img }); // 背景图
				// 绘制背景图
				_this.ctx.drawImage(background_img.path, 0, 0, uni.upx2px(600), uni.upx2px(460));
				
				const QRcodeImgInfo = await _this.getImageInfo({ imgSrc: _this.QRcode }); // 二维码
				// 绘制二维码
				_this.ctx.drawImage(QRcodeImgInfo.path, uni.upx2px(408), uni.upx2px(748), uni.upx2px(152), uni.upx2px(152));
				
				// 绘制商品图，如果此品牌有4个以上的商品的话
				if(this.goods_list.length > 4){
					const product1 = await _this.getImageInfo({ imgSrc: this.goods_list[0].image }); // 商品图1
					const product2 = await _this.getImageInfo({ imgSrc: this.goods_list[1].image }); // 商品图2
					const product3 = await _this.getImageInfo({ imgSrc: this.goods_list[2].image }); // 商品图3
					const product4 = await _this.getImageInfo({ imgSrc: this.goods_list[3].image }); // 商品图4
					
					_this.ctx.drawImage(product1.path, uni.upx2px(20), uni.upx2px(330), uni.upx2px(110), uni.upx2px(110));
					_this.ctx.drawImage(product2.path, uni.upx2px(150), uni.upx2px(330), uni.upx2px(110), uni.upx2px(110));
					_this.ctx.drawImage(product3.path, uni.upx2px(280), uni.upx2px(330), uni.upx2px(110), uni.upx2px(110));
					_this.ctx.drawImage(product4.path, uni.upx2px(410), uni.upx2px(330), uni.upx2px(110), uni.upx2px(110));
				}
				
				_this.writeTextOnCanvas(_this.ctx,22,46,_this.factoryInfo.company_desc,uni.upx2px(25),uni.upx2px(610))
				
				// 绘制二维码提示
				const tips = '扫描二维码'
				_this.ctx.setFillStyle('#6B6B6B');
				_this.ctx.font = 'normal nomal 10px Microsoft YaHei';
				_this.ctx.fillText(tips, uni.upx2px(25) , uni.upx2px(810));
				
				// 绘制二维码提示
				const tips2 = '查看品牌详情'
				_this.ctx.setFillStyle('#F59359');
				_this.ctx.font = 'bold normal 12px Microsoft YaHei';
				_this.ctx.fillText(tips2, uni.upx2px(25) , uni.upx2px(850));
				
				// 绘制标题
				const name = _this.factoryInfo.name
				_this.ctx.setFillStyle('#141414');
				_this.ctx.font = 'bold nomal 16px Microsoft YaHei';
				_this.ctx.textAlign = 'center'
				_this.ctx.fillText(name, uni.upx2px(300) , uni.upx2px(520));
				
				// 绘制编号
				const factory_name = '编号：' + _this.factoryInfo.factory_name
				_this.ctx.setFillStyle('#6B6B6B');
				_this.ctx.font = 'normal nomal 12px Microsoft YaHei';
				_this.ctx.textAlign = 'center'
				_this.ctx.fillText(factory_name, uni.upx2px(300) , uni.upx2px(560));
				
				//延迟后渲染至canvas上
				setTimeout(function() {
					_this.ctx.draw();
				}, 600);
			},
			async getImageInfo({ imgSrc }) {
				uni.showLoading({
					title: '正在生成海报',
					mask: true
				})
				return new Promise((resolve, errs) => {
					if(imgSrc.indexOf('https')!=-1){
						uni.downloadFile({
							url: imgSrc,
							success:function(res){
								uni.getImageInfo({
									src: res.tempFilePath,
									success: function(image) {
										uni.hideLoading()
										resolve(image);
									},
									fail(err) {
										uni.hideLoading()
										uni.showToast({
											title: '生成失败，请退出重试',
											icon: 'none',
											duration: 1500
										})
										errs(err);
									}
								});
							}
						})
					}else{
						uni.getImageInfo({
							src: imgSrc,
							success: function(image) {
								uni.hideLoading()
								resolve(image);
							},
							fail(err) {
								uni.hideLoading()
								uni.showToast({
									title: '生成失败，请退出重试',
									icon: 'none',
									duration: 1500
								})
								errs(err);
							}
						});
					}
				});
			},
		},
		mounted() {
			
		},
		onReachBottom() {
			if(!this.noMore){
				this.isLoading = true
				this.page++
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.bot-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFF;
		padding: 0 30rpx;
		.collection{
			display: flex;
			align-items: center;
			image{
				width: 35rpx;
				height: 35rpx;
				margin-right: 10rpx;
			}
		}
		.share{
			line-height: 90rpx;
			width: 470rpx;
			text-align: center;
			color: #FFF;
			background-color: #F59359;
			border-radius: 10rpx;
		}
	}
	.brand-info{
		padding-top: 1rpx;
		padding-bottom: 120rpx;
	}
	.brand-info-tabs{
		padding: 20rpx 30rpx;
		background-color: #F7F7F7;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		min-height: 40rpx;
		.brand-info-tabs-box {
			margin: 0 -30rpx;
			padding: 0 30rpx;
			/deep/ image{
				transition: all .5s;
				vertical-align: top;
			}
			/deep/ &.fixed{
				padding: 10rpx 30rpx;
				background-color: #F7F7F7;
				.u-tab-item{
					border-radius: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					&.active{
						background-color: #F59359;
						color: #FFF !important;
						font-size: 28rpx !important;
					}
				}
				.u-tab-item{
					image{
						height: 0;
						opacity: 0;
						margin-bottom: 0;
						border: none;
					}
				}
			}
		}
	}
	.white-raidus{
		background-color: #F8F8F8;
		&::after{
			content: '';
			display: block;
			background-color: #FFF;
			height: 30rpx;
			border-radius: 16rpx 16rpx 0 0;
		}
	}
	.brand-info-sort-tabs{
		background-color: #FFF;
	}
	.brand-info-box{
		background-color: #FFF;
		position: relative;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		.brand-bg{
			position: relative;
			overflow: hidden;
			&::after{
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
				left: 0;
				top: 0;
				background-image: linear-gradient(to bottom,rgba(255,255,255,0) 50%,rgba(0,0,0,.8));
			}
			image{
				width: 100%;
			}
		}
		.brand-info-box-text{
			display: flex;
			align-items: flex-start;
			position: relative;
			margin-top: -30rpx;
			position: relative;
			z-index: 1;
			background-color: #FFF;
			border-radius: 16rpx 16rpx 0;
			.box-text-inner{
				display: flex;
				align-items: center;
				padding: 0 30rpx;
			}
			.brand-info-box-text-left{
				margin-top: -75rpx;
				image{
					border: solid 2rpx #F9F9F9;
					border-radius: 8rpx;
					width: 130rpx;
					height: 130rpx;
					background-color: #EEE;
				}
			}
			.brand-info-box-text-right{
				flex: 1;
				min-width: 0;
				margin-left: 20rpx;
				margin-top: -80rpx;
				.brand-info-box-tit{
					font-size: 36rpx;
					color: #FFF;
					margin-bottom: 40rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					text{
						font-size: 24rpx;
						margin-left: 20rpx;
						color: #7E5A21;
						background-color: #FCF6EC;
						border: solid 2rpx #F2F2F2;
						line-height: 36rpx;
						border-radius: 4rpx;
						font-weight: normal;
						padding: 0 10rpx;
					}
				}
				.brand-info-box-hot{
					color: #909090;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					text{
						height: 18rpx;
						line-height: 18rpx;
						margin-right: 20rpx;
						padding-right: 10rpx;
						border-right: solid 1px #F4F4F4;
					}
				}
			}
			.brand-action{
				display: flex;
				.brand-action-item{
					text-align: center;
					.action-name{
						color: #909090;
						font-size: 20rpx;
						margin-top: 10rpx;
					}
				}
			}
			.brand-collect{
				width: 60rpx;
				height: 60rpx;
				line-height: 50rpx;
				background-color: #f8f8f8;
				border-radius: 50%;
				text-align: center;
				image{
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
					margin-top: -5rpx;
				}
			}
		}
		.brand-img{
			width: 100%;
			max-height: 420rpx;
			border-radius: 12rpx;
			margin-top: 30rpx;
		}
		.brand-info-box-des{
			margin: 30rpx 0;
			position: relative;
			padding: 0 30rpx;
			.des-tit{
				font-size: 24rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}
		.brand-info-box-tags{
			margin: 30rpx 30rpx 0;
			background-color: #F9F9F9;
			border-radius: 10rpx;
			padding: 20rpx;
			.brand-info-box-tags-item{
				display: flex;
				font-size: 22rpx;
				line-height: 46rpx;
				.value{
					flex: 1;
					min-width: 0;
					line-height: 42rpx;
					color: #444;
					display: flex;
					align-items: center;
					text{
						color: #444;
						margin-right: 20rpx;
						&:last-child{
							flex: 1;
							min-width: 0;
							margin-right: 0;
						}
					}
				}
			}
		}
		.brand-tags{
			display: flex;
			padding: 0 30rpx;
			.brand-tags-item{
				height: 62rpx;
				line-height: 62rpx;
				text-align: center;
				font-size: 24rpx;
				color: #7E5A21;
				border-radius: 4rpx;
				border: solid 2rpx #FCF6EC;
				width: 150rpx;
				margin-right: 30rpx;
				image{
					vertical-align: middle;
					width: 30rpx;
					height: 30rpx;
					margin: -10rpx 10rpx 0 0;
				}
			}
		}
	}
	.brand-info-products{
		background-color: #FFF;
		padding: 0 30rpx;
	}
	.brand-info-products{
		.product-items:last-child{
			border-bottom: none;
		}
	}
	
	/* #ifdef APP-PLUS */
	.posterPopup .uni-transition{
		height: 100%;
	}
	/* #endif */
	.poster{
		width: 600rpx;
		background-color: #FFF;
		overflow: hidden;
		border-radius: 0 0 10rpx 10rpx;
		
		/* #ifdef APP-PLUS */
		width: 100%;
		height: 100%;
		text-align: center;
		background-color: transparent;
		.appPoster{
			position: fixed;
			top: 0;
			bottom: 150rpx;
			left: 0;
			right: 0;
			.close{
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
		}
		.poster-canvas{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-radius: 50%;
		}
		/* #endif */
		
		image{
			position: absolute;
			left: 0;
			top: 0;
		}
		
		.save{
			margin: 40rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: rgba(20,20,20,1);
			border-radius: 8rpx;
			text-align: center;
			color: #FFF;
			font-size: 32rpx;
			font-weight: bold;
		}
		.poster-share-btns{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			background-color: #FFF;
			border-radius: 10rpx 10rpx 0 0;
			height: 150rpx;
			.poster-share-btn{
				flex: 1;
				.text{
					font-size: 24rpx;
					margin-top: 10rpx;
				}
				.poster-share-btn-image{
					width: 80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}
	}
	
</style>
